<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/loading.min.css" />
<link href="fonts/iconfont.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<!-- 主界面菜单同时移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable" id="app">
    <!-- 主页面容器 -->
    <div class="mui-inner-wrap">
        <!-- 菜单容器 -->
        <aside class="mui-off-canvas-left" id="offCanvasSide">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll navLeft">
                    <!-- 菜单具体展示内容 -->                
                	<ul id="nav">
                		<li v-for="vo in columns" :data-id="vo.id"><span class="icon_dot mui-pull-left"></span>{{vo.title}} <i class="mui-pull-right mui-icon mui-icon-arrowright"></i></li>  
                	</ul>

                	<ul>
                		<li><a href="setting.htm"><span class="icon_dot mui-pull-left"></span>个人中心 <i class="mui-pull-right mui-icon mui-icon-arrowright"></i></a></li>
                		<li><a href="share.htm"><span class="icon_dot mui-pull-left"></span>推荐我们 <i class="mui-pull-right mui-icon mui-icon-arrowright"></i></a></li>
                		<li><a href="about.htm"><span class="icon_dot mui-pull-left"></span>关于我们 <i class="mui-pull-right mui-icon mui-icon-arrowright"></i></a></li>
                		<li><a href="legal.htm"><span class="icon_dot mui-pull-left"></span>法律声明 <i class="mui-pull-right mui-icon mui-icon-arrowright"></i></a></li>
                	</ul>                   
                </div>
                <div class="navRight">
                	<ul v-for="vo in columns" :id="'c'+vo.id">
                	<li v-for="f in vo.sarry" :data-id="f.id" :data-fid="vo.id"><div class="img"><img :src="f.img"/></div> <a :href="'channel.htm?type='+f.id+'&title='+f.title">{{f.title}}</a>
                	<div class="mui-pull-right guanzhu active" v-if="f.isfav == 1">已关注</div>
                	<div class="mui-pull-right guanzhu" v-else>关注</div>
                	</li>                    	
                	</ul>
                </div>
            </div>
        </aside>

        <!-- 主页面标题 -->
        <header class="mui-bar mui-bar-nav in-bar">    
    		<a href="javascript:window.hostory.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    		<a href="#offCanvasSide" class="mui-icon mui-icon-bars mui-pull-left"></a>
      		<h1 class="mui-title" v-text="title"></h1>
      		<a href="javascript:window.location.href='search.htm'" id="searchIcon" class="mui-icon mui-icon-search mui-pull-right"></a>
    	</header> 
		
		<!-- 分类 -->
    	<div class="channelBox fixChannel">
            <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted channel">
				<div class="mui-scroll">
					<a href="#" class="mui-control-item mui-active">全部</a>	
					<a :href="'channel.htm?type='+vo.id+'&title='+vo.title" class="mui-control-item" v-for="vo in guanzhu">{{vo.title}}</a>	
				</div>					
			</div>
			<div class="dingyue">
				<a href="dingyue.htm">
        		<i class="mui-icon mui-icon-plusempty"></i> 
        		</a>
        	</div>
		</div>

        
        <!-- 底部tabBar -->
        <nav class="mui-bar mui-bar-tab">
		    <a href="index.htm" class="mui-tab-item">
		        <span class="mui-icon mui-icon-home"></span>
		        <span class="mui-tab-label">首页</span>
		    </a>
		    <template v-if="t == 'NL'">
		    <a href="list.htm?t=NL&type=BN" class="mui-tab-item my-tab mui-active">
		        <span class="icon icon-yumi"></span>
		        <span class="mui-tab-label">能量类</span>
		    </a>
		    </template>
		    <template v-else>
		    <a href="list.htm?t=NL&type=BN" class="mui-tab-item my-tab">
		        <span class="icon icon-yumi"></span>
		        <span class="mui-tab-label">能量类</span>
		    </a>
		    </template>

		    <template v-if="t == 'DB'">
		    <a href="list.htm?t=DB&type=BD" class="mui-tab-item my-tab mui-active">
		        <span class="icon icon-danbaizhi"></span>
		        <span class="mui-tab-label">蛋白类</span>
		    </a>
		    </template>
		    <template v-else>
		    <a href="list.htm?t=DB&type=BD" class="mui-tab-item my-tab">
		        <span class="icon icon-danbaizhi"></span>
		        <span class="mui-tab-label">蛋白类</span>
		    </a>
		    </template>

		    <template v-if="t == 'TJJ'">
		    <a href="list.htm?t=TJJ&type=BT" class="mui-tab-item my-tab mui-active">
		        <span class="icon icon-huaxueshiji"></span>
		        <span class="mui-tab-label">添加剂</span>
		    </a>
		    </template>
		    <template v-else>
		    <a href="list.htm?t=TJJ&type=BT" class="mui-tab-item my-tab">
		        <span class="icon icon-huaxueshiji"></span>
		        <span class="mui-tab-label">添加剂</span>
		    </a>
		    </template>
			
			<template v-if="t == 'YZ'">
		    <a href="list.htm?t=YZ&type=BY" class="mui-tab-item my-tab mui-active">
		        <span class="icon icon-cunqianguan"></span>
		        <span class="mui-tab-label">养殖</span>
		    </a>
		    </template>
		    <template v-else>
		    <a href="list.htm?t=YZ&type=BY" class="mui-tab-item my-tab">
		        <span class="icon icon-cunqianguan"></span>
		        <span class="mui-tab-label">养殖</span>
		    </a>
		    </template>

		    <a href="setting.htm" class="mui-tab-item my-tab">
		        <span class="icon icon-huiyuan"></span>
		        <span class="mui-tab-label">个人</span>
		    </a>
		</nav>

        <!-- 主页面内容容器 -->
        <div id="my-scroll" class="mui-content mui-scroll-wrapper" style="padding-top: 84px">
            <div class="mui-scroll">    
                <!-- 主界面具体展示内容 -->				    
				<div class="box bg-white">
				    <ul class="mui-table-view">
				        <li class="mui-table-view-cell mui-media my-media" v-for="vo in list">
				        	<a :href="vo.url" style="margin: 0; white-space: normal;">
			                <img class="mui-media-object mui-pull-left" :src="vo.imgurl">
			                <div class="mui-media-body">
			                	{{vo.title}}
			                	<div style="padding: 5px 0">
			                    <p class="mui-pull-left">
			                    	<i class="icon icon-shijian"></i>
			                    	<span v-text="vo.time"></span>
			                    </p>
			                    <p class="mui-pull-right">
			                    	<i class="icon icon-yanjing"></i>
			                    	<span v-text="vo.num"></span>
			                    </p>
			                    </div>
			                </div>	
			                </a>			            
				        </li>

				        <div id="loadding" class="loadding">
							<span class="mui-spinner"></span>
						</div>	
				    </ul>
				</div>
				
            </div>
        </div>
   	 <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>

<script src="js/mui.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/loading.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" charset="utf-8">	
app.init();
mui('body').on('tap', 'a', function() {
	document.location.href = this.href;
});
if(request.type=='' || request.type==undefined){
	alert("参数错误");	
	window.history.go(-1);
}
if(request.t=='' || request.t==undefined){
	alert("参数错误");	
	window.history.go(-1);
}
$(function(){ 
	$("#nav").on("tap","li", function() {
		var dataid = $(this).attr("data-id");
		$("#nav li").removeClass("active");		
    	$(this).addClass('active');
    	$(".navRight ul").hide();
		$("#c"+dataid).show();
	});
	$(".navRight").on("tap",".guanzhu", function() {
		var o = $(this);
		var id = $(this).parent().attr('data-id');
		if ($(this).hasClass("active")){
			var up = 0;
		}else{
			var up = 1;
		}
		request = {
			command:10,			
			id:id,
			column:'AAAA',
			udid:uuid,
			up:up,
		};	
		mui.get(api,request,function(res){//关注操作
			if (res.response.code==0){
				if (up==0){
					o.html('关注').removeClass('active');
				}else{
					o.html('已关注').addClass('active');
				}
			}else{
				mui.alert(res.desc, '系统消息');
			}
		},'json');
	});
})

var vm = new Vue({
	el:"#app",
	data:{
		title : '能量类',
		type:request.type,
		t:request.t,
		columns:[],
		list:[],
		page : 0,
		canScroll : 1,
		next : 1,
		guanzhu : []
	},
	created : function(){		
		that = this;
		switch(that.t){			
			case 'NL':			
			that.title = '能量类';
			break;
			case 'DB':
			that.title = '蛋白类';
			break;
			case 'TJJ':
			that.title = '添加剂';
			break;
			case 'YZ':
			that.title = '养殖';
			break;
		}
		that.goPage();//初始加载

		mui.showLoading('数据加载中');
		request = {
			command:1,
			udid:uuid,
			column:that.t
		};
		mui.get(api,request,function(res){	//关注列表			
			mui.hideLoading();			
			that.guanzhu = res.body.columns;			
		},'json');
	},
	methods: {
		goPage : function(){
			var that = this;
        	that.canScroll = 0;
        	document.getElementById("loadding").className="loadding";  
			request = {
				command:2,
				udid:uuid,
				column:'AAAA',
				type:that.type,
				page:that.page
			};	
			mui.get(api,request,function(res){//文章列表
				document.getElementById("loadding").className="hide"; 	
				that.columns = res.body.columns;
				that.list = that.list.concat(res.body.item);
				that.next = res.body.next;
				that.canScroll = 1;
			},'json');
		}
	},
	updated : function(){
		mui('.mui-scroll-wrapper').scroll();  
		var scroll = mui('.mui-scroll-wrapper').scroll();
		var mainScroll = mui('#my-scroll').scroll();
		document.getElementById('my-scroll').addEventListener('scroll', function (e ) {		
			if (mainScroll.maxScrollY > mainScroll.y){
				if(that.canScroll==0 || that.next==0){//不要重复加载				
					return;
				}
				that.page++;   
				that.goPage(that.page);	
			};
		}) 
	}
});
</script>
</body>
</html>